<template>
  <div id="race">
    <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh">

      <div slot="drawer">
        1111
      </div>

      <view-box ref="viewBox" style="height:100%;">
        <x-header style="background-color: white" title="use prop:title">
          <span slot="overwrite-title">比赛</span>
          <img style="width: 35px" slot="overwrite-left" src="https://modao.cc/uploads3/images/1727/17271440/raw_1519363209.jpeg" alt="">
          <span @click="drawerVisibility = !drawerVisibility" slot="right">
            <i class="fa fa-user"></i>
          </span>
        </x-header>
        <search style="position:relative" placeholder="赛事名称/举办地名" v-model="value" position="relative" :auto-fixed="false" auto-scroll-to-top top="46px" ref="search"></search>

        <flexbox>
          <flexbox-item @click.native="toggle($event,0)" class="needsclick">
            <div class="flex-demo">分类
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,1)">
            <div class="flex-demo">日期
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,2)">
            <div class="flex-demo">地区
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>

          <flexbox-item @click.native="toggle($event,3)">
            <div class="flex-demo">筛选
              <i class='fa fa-sort-down'></i>
            </div>
          </flexbox-item>
          <div class="wrapper">
            <div>
              <ul>

                <li>
                  <group>
                    <cell :border-intent="false" title="不限"></cell>
                    <cell :border-intent="false" title="全程马拉松"></cell>
                    <cell :border-intent="false" title="半程马拉松"></cell>
                  </group>
                </li>

                <li class="date">
                  <div>
                    <div class="data-box">
                      <div @click="chooseDate" class="data-left vux-1px-t vux-1px-b">
                        <div class="vux-1px-b">不限</div>
                        <div class="vux-1px-b">近一年</div>
                        <div class="vux-1px-b">近一月</div>
                        <div class="vux-1px-b">近一周</div>
                        <div class="vux-1px-b">年</div>
                      </div>
                      <div style="display:block" class="data-right vux-1px"></div>
                      <div style="display:none" class="data-right vux-1px">
                        <div style="display: flex;overflow:scroll;height:150px">
                          <div style="flex:1">
                            <p class="vux-1px-b" style="text-align:center">2011</p>
                            <p class="vux-1px-b" style="text-align:center">2012</p>
                            <p class="vux-1px-b" style="text-align:center">2013</p>
                            <p class="vux-1px-b" style="text-align:center">2014</p>
                            <p class="vux-1px-b" style="text-align:center">2015</p>
                            <p class="vux-1px-b" style="text-align:center">2016</p>
                            <p class="vux-1px-b" style="text-align:center">2017</p>
                            <p class="vux-1px-b" style="text-align:center">2018</p>
                            <p class="vux-1px-b" style="text-align:center">2019</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>

                <li class="area">
                  <div class="">

                    <flexbox class="vux-1px-t vux-1px-b">
                      <flexbox-item @click.native="toggleArea($event,0)">
                        <div>热门</div>
                      </flexbox-item>
                      <flexbox-item @click.native="toggleArea($event,1)">
                        <div>国内</div>
                      </flexbox-item>
                      <flexbox-item @click.native="toggleArea($event,2)">
                        <div>国外</div>
                      </flexbox-item>
                    </flexbox>

                    <ul class="vux-1px-b">
                      <li style="display:block">
                        <div>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                        </div>
                      </li>

                      <li>
                        <div>
                          <span>不限</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>北京市</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                        </div>
                      </li>

                      <li>
                        <div>
                          <span>全部</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>美国</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>不限</span>
                          <span>上海</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                          <span>北京</span>
                        </div>
                      </li>

                    </ul>
                  </div>
                </li>

                <li class="screen">
                  <group>
                    <cell :border-intent="false" title="按时间排序"></cell>
                    <cell :border-intent="false" title="按人气排序"></cell>
                  </group>
                  <div style="text-align: center">
                    <div style="display: inline-block">
                      <x-button mini type="default">重置</x-button>
                      <x-button mini type="primary">确定</x-button>
                    </div>
                  </div>
                </li>

              </ul>
            </div>

          </div>

        </flexbox>
        <div>

          <ul>
            <li style="display: none">
              <panel :list="list" :type="type"></panel>
            </li>

            <scroller style="top:0px" lock-x scrollbar-y height="-115" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
              <div class="box2">
                <div class="content">
                  <ul>
                    <li v-for="(item,index) in list">
                      <div>
                        <div class="weui-media-box weui-media-box_text">
                          <div class="weui-media-box_appmsg">
                            <div class="weui-media-box__hd"><img src="//placeholder.qiniudn.com/70x70/3cc51f/ffffff" alt="" class="weui-media-box__thumb"></div>
                            <div class="weui-media-box__bd">
                              <h4 class="weui-media-box__title">{{item.name}}</h4>
                              <p class="weui-media-box__desc">活动时间:{{item.time}}</p>
                              <p class="weui-media-box__desc">活动地点:{{item.address}}</p>
                              <p class="weui-media-box__desc">项目设置:半程马拉松</p>
                            </div>
                          </div>
                          <div style="position: relative" class="weui-media-box__info">

                            <rater :font-size="20" :disabled="true" style="display:inline-block" v-model="data3"></rater>
                            <div class="status">正在报名</div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
              <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
                <span v-show="demo4Value.pullupStatus === 'default'"></span>
                <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
                <span v-show="demo4Value.pullupStatus === 'loading'">
                  <spinner type="ios-small"></spinner>
                </span>
              </div>
              <div v-if='stop' class="nomore">没有更多</div>
            </scroller>
          </ul>

          <circle-menu type="top" :number='3' mask='black' btn circle>
            <a slot="item_1" class="fa fa-twitter fa-lg"></a>
            <a slot="item_2" class="fa fa-weixin fa-lg"></a>
            <a slot="item_3" class="fa fa-weibo fa-lg"></a>
          </circle-menu>

        </div>

        <div @click="modal" class="modal"></div>
      </view-box>

    </drawer>

  </div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable*/

import { indexedDB } from "@/api/indexedDB.js";
import { axios } from "@/api/axios.js";
import mixin from "@/common/js/mixin";

import {
  Flexbox,
  FlexboxItem,
  Panel,
  Search,
  Rater,
  Cell,
  Group,
  XHeader,
  ViewBox,
  Scroller,
  Spinner,
  TransferDom,
  Drawer,
  XButton
} from "vux";

//  import Myheader from "@/common/components/myheader.vue";
import CircleMenu from "vue-circle-menu";

export default {
  mixins: [mixin],
  props: ["page"],
  data() {
    return {
      config: {
        perpage: 10, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      drawerVisibility: false,
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      demo4Value: {
        pullupStatus: "default"
      },
      data3: 1,
      value: "",
      type: "5",
      list: [
        {
          src: "//somedomain.somdomain/x.jpg",
          fallbackSrc: "//placeholder.qiniudn.com/70x70/3cc51f/ffffff",
          title: "2018比佛利无锡马拉松",
          desc:
            "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: "/component/cell",
          meta: {
            source: "来源信息",
            date: "时间",
            other: "其他信息"
          }
        },
        {
          src: "//placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title: "标题二",
          desc:
            "由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: {
            path: "/component/radio",
            replace: false
          },
          meta: {
            source: "来源信息",
            date: "时间",
            other: "其他信息"
          },
          clock: false
        }
      ]
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      axios.get(`${host}race/list?page=1`).then(
        response => {
          if (response.data.code == "200") {
            this.list = response.data.data.list;
            console.log(response.data.data);
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    modal() {
      let flexItems = document.querySelectorAll(".flex-demo");
      //let flexItem = document.querySelectorAll('.flex-demo')[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      [].forEach.call(flexItems, function(item, index) {
        item.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      });
    },
    chooseDate(e) {
      //console.log(e.target)

      if (e.target.innerHTML == "年") {
        document.querySelectorAll(".data-right")[0].style.display = "none";
        document.querySelectorAll(".data-right")[1].style.display = "block";
      } else {
        document.querySelectorAll(".data-right")[1].style.display = "none";
        document.querySelectorAll(".data-right")[0].style.display = "block";
      }
    },
    toggle(e, index) {
      let flexItems = document.querySelectorAll(".flex-demo");
      let flexItem = document.querySelectorAll(".flex-demo")[index];
      let lists = document.querySelectorAll(".wrapper>div>ul>li");

      //console.log(lists[index])
      //lists[index].style.display = 'block'

      if (flexItem.querySelector("i").className.indexOf("fa-sort-down") != -1) {
        // console.log(flexItem.querySelector('i').className)
        //   console.log(flexItem.querySelector('i').className.indexOf("fa-sort-down"))
        [].forEach.call(flexItems, function(item, index) {
          item.querySelector("i").className = "fa fa-sort-down";
          lists[index].style.display = "none";
        });
        flexItem.querySelector("i").className = "fa fa-sort-up";
        lists[index].style.display = "block";
        document.querySelector("#app .modal").style.display = "block";
      } else if (
        flexItem.querySelector("i").className.indexOf("fa-sort-up") != -1
      ) {
        flexItem.querySelector("i").className = "fa fa-sort-down";
        lists[index].style.display = "none";
        document.querySelector("#app .modal").style.display = "none";
      }

      //        if(index==1){
      //          document.querySelectorAll('.data-right')[0].style.display='block'
      //        }
    },
    toggleArea(e, index) {
      let area = document.querySelector(".area");
      //e.target.style.color='red';

      [].forEach.call(area.querySelectorAll("ul li"), function(item, index) {
        item.style.display = "none";
      });

      area.querySelectorAll("ul li")[index].style.display = "block";
      //console.log(index)
    },
    load4() {
      this.demo4Value.pullupStatus = "up";

      setTimeout(() => {
        this.list.push({
          title: "婴儿画报2017年第三季度合订本",
          img: "/static/book.jpg",
          author: "作者金波",
          status: "已领取"
        });
        setTimeout(() => {
          this.demo4Value.pullupStatus = "default";
          this.$nextTick(() => {
            this.$refs.scroller.reset();
          });
        }, 10);
      }, 2000);
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Flexbox,
    FlexboxItem,
    Panel,
    Search,
    Rater,
    Group,
    Cell,
    XHeader,
    ViewBox,
    Scroller,
    Spinner,
    CircleMenu,
    Drawer,
    XButton
  },
  
};
</script>


<style lang="less" rel="stylesheet/less">
#race html,
#app body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.flex-demo {
  text-align: center;
}

#race .weui-media-box_appmsg .weui-media-box__hd {
  width: 70px;
  height: 70px;
}

#race .status {
  position: absolute;
  top: 4px;
  right: 0;
}

#race .vux-header .vux-header-left {
  top: 7px;
}

#race .vux-header-title-area {
  text-align: center;
  line-height: 40px;
}

#race .vux-header-right {
  font-size: 25px;
  display: none;
}

#race .footerBanner {
  display: none;
}

#race .weui-tab__panel {
  padding-bottom: 0;
}

#race ul {
  background-color: #fcf9fe;
  li {
    background-color: white;
    margin-top: 10px;
  }
}

#race .vux-flexbox {
  background-color: white;
  line-height: 30px;
  position: relative;
  z-index: 2;
}

#race .flex-demo .fa {
  vertical-align: text-top;
  padding-left: 5px;
}

#race .flex-demo .fa-sort-up {
  position: relative;
  top: 7px;
}

#race .wrapper {
  position: absolute;
  left: 0;
  top: 30px;
  z-index: 1;
  width: 100%;
}

#race .modal {
  background-color: #000;
  width: 100%;
  height: 100vh;
  display: none;
  opacity: 0.6;
  position: absolute;
  top: 0;
  z-index: 1;
}

#race .wrapper li {
  display: none;
  & > div > div {
    margin-top: -10px;
    margin-bottom: 10px;
  }
}

#race .area .vux-flexbox-item {
  text-align: center;
}

#race .area span {
  padding: 10px;
  line-height: 2;
  display: inline-block;
}

#race .data-box {
  display: flex;
  .data-left {
    flex: 1;
    text-align: center;
  }
  .data-right {
    flex: 2;
  }
}

#race #CircleMenu {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

#race .vux-search-box {
  z-index: 2;
  position: relative;
}

#race .vux-header {
  position: relative;
  z-index: 2;
}

#race .wrapper {
  padding: 0;
}
</style>
